<template>
  <div>
    <h2>父组件</h2>
    <div>
      <h3>父组件中的数据：</h3>
      <div class="data-display">
        <p>消息: <span>{{ message }}</span></p>
        <p>计数: <span>{{ count }}</span></p>
        <p>用户: <span>{{ user.name }} ({{ user.age }})</span></p>
        <div class="controls">
          <button @click="updateMessage">更新消息</button>
          <button @click="increment">增加计数</button>
        </div>
      </div>
    </div>
    <Child />
  </div>
</template>

<script lang="ts" setup>
/**
 * Provide/Inject 详解 - 提供方(父组件)
 * 
 * 1. 概念：
 *    Provide/Inject 是 Vue 提供的一种依赖注入机制，用于跨多级组件传递数据。
 *    父组件通过 provide 提供数据，后代组件通过 inject 注入数据。
 * 
 * 2. 基本原理：
 *    - 祖先组件使用 provide 提供数据
 *    - 后代组件使用 inject 注入数据
 *    - 中间组件不需要知道或处理这些数据
 * 
 * 3. 提供数据的方式：
 *    3.1 提供静态值
 *    3.2 提供响应式数据
 *    3.3 提供函数（可用于更新数据）
 */

import { ref, provide } from 'vue';
import Child from './child.vue';

// 创建响应式数据
const message = ref('来自父组件的消息');
const count = ref(0);
const user = ref({
  name: 'John',
  age: 25,
});

// 更新数据的方法
function updateMessage() {
  message.value = '更新的消息 - ' + new Date().toLocaleTimeString();
}

function increment() {
  count.value++;
}

/**
 * 4. 提供数据 (Provide)：
 * 
 * 4.1 提供单个值：
 *     provide('key', value);
 * 
 * 4.2 提供多个值：
 *     provide('key1', value1);
 *     provide('key2', value2);
 * 
 * 4.3 提供响应式数据：
 *     const value = ref('data');
 *     provide('key', value);  // 直接提供 ref，保持响应性
 * 
 * 4.4 提供只读数据（防止子组件修改）：
 *     provide('key', readonly(value));
 * 
 * 4.5 提供更新方法：
 *     provide('updateValue', (newValue) => { value.value = newValue; });
 */

// 提供数据给后代组件
provide('message', message);  // 提供响应式数据
provide('count', count);      // 提供响应式数据
provide('user', user);        // 提供响应式数据

// 提供方法给后代组件，允许它们更新数据
provide('updateMessage', updateMessage);
provide('increment', increment);

/**
 * 5. 使用场景：
 *    5.1 主题配置：提供主题数据给整个应用的组件
 *    5.2 用户信息：在应用中共享当前用户数据
 *    5.3 多级组件通信：避免 props 逐层传递（prop drilling）
 *    5.4 插件开发：插件向应用的所有组件提供功能
 * 
 * 6. 注意事项：
 *    6.1 命名冲突：使用 Symbol 作为 key 可以避免命名冲突
 *    6.2 响应性：Vue 3 中直接提供 ref/reactive 对象可保持响应性
 *    6.3 组件耦合：过度使用可能导致组件间隐式依赖
 */
</script>

<style scoped>
/* 父组件样式 */
div {
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border-radius: 15px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: 15px;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

.data-display {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.data-display p {
  margin: 10px 0;
}

.data-display span {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.controls {
  margin-top: 15px;
}

button {
  background-color: white;
  color: #8e2de2;
  border: none;
  padding: 8px 15px;
  margin-right: 10px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background-color: #f0f0f0;
  color: #4a00e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>